<template>
	<div class="detail">
			<mt-header v-if="detail!=null" fixed :title="detail.title">
			  <router-link to="/" slot="left">
			    <mt-button icon="back">back</mt-button>
			  </router-link>
			 
			</mt-header>
			<div class="contain" v-if="detail!=null">
				<p>发布于{{detail.create_at|formDate}} 作者{{detail.author.loginname}}
				{{detail.visit_count}}次浏览</p>
				<div class="" class="content" v-html="detail.content">
					
				</div>
				
			</div>
			<hr />
			<div class="replay" v-if="detail!=null&&detail.reply_count!=0">
				<h3>{{detail.reply_count}}回复</h3>
				<div class="replyList" v-for="(item,index) in detail.replies">
					<div class="replyItem">
						<div>
							<img :src="item.author.avatar_url" alt="" />
							<h3>{{item.author.loginname}}</h3>
							{{index+1}}楼  <span>发表于{{item.create_at | formDate}}</span>
						</div>
						<div id="" v-html="item.content">
						
						</div>
					</div>
				</div>
				
			</div>
			<div class="replay" v-if="detail.reply_count==0">
				<p>暂无回复</p>
			</div>
			<div class="talk" >
				<input type="text" v-model="myreply" />
				<button @click="publish">发表评论</button>
			</div>
			
	</div>
</template>

<script>
	import { MessageBox } from 'mint-ui';
	import {getDetail,publishReply} from "../config/axios.js"
	export default {
		data(){
			return{
				detail:null,
				myreply:"",
				id:""
			}
		},
		
		created(){
			console.log(this.$route.params.id)
			var id=this.$route.params.id;
			this.id=id;
			this.getData()
		},
		methods:{
			getData(){
				getDetail(this.id).then(res=>{
					console.log(res.data)
					this.detail=res.data.data
				})
			},
			publish(){
				var token=localStorage.getItem("token")
				var islogin=localStorage.getItem("islogin")
				if(token==undefined||islogin==false){
					alert("发表评论需要先登录，请先登录");
					localStorage.setItem("tempReply",this.myreply);
					this.$router.push("/login")
				}else{
					var data={accesstoken:token,content:this.myreply}
					publishReply(this.id,data).then(res=>{
						console.log(res.data)
						if(res.data.success==true){
							MessageBox.alert('发表成功!').then(action => {
							  this.myreply="";
							  this.getData();
							});
						}
					})
					
				}
			}
		}
		
	}
</script>

<style>
	.contain{
		margin-top: 50px;
	}
	.content img{
		width: 100%;
	}
	.replay{
		margin-top: 9px;
	}
	.replyItem{
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #CCCCCC;
		margin: 9px;
	}
	.replyItem img{
		width: 1rem;
	}
</style>